<template>
  <div class="found">
    <top-nav></top-nav>
    <!-- 轮播图组件 -->
    <div class="swiperBox">
      <swipe :autoplay="3000" lazy-render indicator-color="white">
        <swipe-item v-for="(item, index) in images" :key="index">
          <img :src="item" style="width: 100%; height: 125px" />
        </swipe-item>
      </swipe>
    </div>

    <!-- 图标列表组件 -->
    <div class="iconList">
      <div class="recommend">
        <div class="item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tuijian"></use>
          </svg>
        </div>
        <p>每日推荐</p>
      </div>
      <div class="fm">
        <div class="item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-diantai"></use>
          </svg>
        </div>
        <p>私人FM</p>
      </div>
      <div class="songList">
        <div class="item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yinlegedanyinfu"></use>
          </svg>
        </div>
        <p>私人FM</p>
      </div>
      <div class="rank">
        <div class="item">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paihangbang"></use>
          </svg>
        </div>
        <p>私人FM</p>
      </div>
    </div>

    <!-- 推荐歌单 -->
    <div class="recommendSongL">
      <div class="top">推荐歌单</div>
      <div class="songLists">
        <swipe
          class="my-swipe"
          :loop="false"
          :width="100"
          :show-indicators="false"
        >

          <swipe-item
            class="swipe_item"
            v-for="(item, index) in recommendSongList"
            :key="index"
            @click="$router.push({name:'recommendSongs',query:{id:item.id}})"
          >
            <img :src="item.picUrl" alt="" class="recommendPic" />
            <p>{{ item.name }}</p>
          </swipe-item>

        </swipe>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Swipe, SwipeItem } from "vant";
import { onMounted, reactive } from "vue";
import Api from "../utils/api";

export default {
  name: "Found",
  components: { Button, Swipe, SwipeItem },
  setup() {
    const images = reactive([]);

    const getBanner = async (type) => {
      const results = await Api.FoundInfo.banner((type = 1));
      console.log(results);
      results.banners.forEach((item) => {
        images.push(item.pic);
      });
    };

    const recommendSongList = reactive([]);
    const getRecommendSongList = async (limit) => {
      const results = await Api.FoundInfo.getRecommendSongList((limit = 10));
      console.log(results);
      recommendSongList.push(...results.result);
    };

    onMounted(() => {
      getBanner();
      getRecommendSongList();
    });
    return {
      images,
      getBanner,
      recommendSongList,
    };
  },
};
</script>

<style lang="less" scoped>
.my-swipe .swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
.swiperBox {
  width: 6.5rem;
  height: 2.5rem;
  margin: auto;
  border-radius: 10px;
  margin-top: 0.2rem;
  overflow: hidden;
  // background-color: yellow;
}

.iconList {
  width: 6.5rem;
  margin: auto;
  // height: 1.5rem;
  padding: 5px;
  margin-top: 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: rgb(113, 112, 112);
  & > div {
    width: 20%;
    // border: 1px solid black;
    .item {
      width: 50px;
      margin: auto;
      height: 50px;
      line-height: 50px;
      border-radius: 50%;
      background-color: #fff1f1;
      position: relative;

      .icon {
        position: absolute;
        top: 54%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.recommendSongL {
  width: 6.5rem;
  margin: auto;
  height: 4rem;
  padding: 5px;
  margin-top: 15px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  .top {
    height: 50px;
    line-height: 50px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    // background-color: yellow;
  }
  .songLists {
    width: 100%;
    height: 140px;
    // background-color: skyblue;


    .swipe_item {
      // margin-right: 20px;
      padding: 10px;
      .recommendPic {
        width: 100%;
        height: 90px;
        border-radius: 10px;
      }
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .my-swipe {
      color: black;
      font-size: 12px;
      text-align: center;
      height: 100%;
      // :width="100"
      width: 100%;
      // background-color: #39a9ed;
    }
    ::v-deep .van-swipe-item {
      height: 100%;
      // border: 1px solid black;
    }
  }
}
</style>